<template>
  <div style="height: 70px;">
    <div class="steps"></div>
    <div class="flex justifyContentSpaceBetween">
      <span class="buzhou fl"><div :class="sign.a?'yuan2 mb5':'yuan mb5'">1</div><div :class="sign.a?'ys':''">事件考核创建</div></span>
      <span class="buzhou fl"><div :class="sign.b?'yuan2 mb5':'yuan mb5'">2</div><div :class="sign.b?'ys':''">事件考核汇总</div></span>
      <span class="buzhou fl"><div :class="sign.c?'yuan2 mb5':'yuan mb5'">3</div><div :class="sign.c?'ys':''">事件考核审核</div></span>
      <span class="buzhou fl"><div :class="sign.d?'yuan2 mb5':'yuan mb5'">4</div><div :class="sign.d?'ys':''">事件考核汇总</div></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sign: {}
  },
  data() {
    return {}
  },
  methods: {
    init() {
    },
  }
}
</script>
<style scoped>
.steps {
  height: 2px;
  background: #1f84ec;
  width: 100%;
  /*margin-top: 5px;*/
}

.ys {
  color: #1f84ec;
}

.yuan {
  height: 40px;
  width: 40px;
  line-height: 40px;
  background: #d6e8fb;
  border-radius: 50%;
  margin-top: -20px;
  margin-left: 44%;
  color: #fff;
}

.yuan2 {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: #1f84ec;
  margin-top: -20px;
  margin-left: 44%;
  color: #fff;
}

.buzhou {
  width: 20%;
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
}

.fl {
  float: left
}
</style>
